<!DOCTYPE html>
<html>

<head>
  <title>README</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body>ul {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: calc(50% - 500px);
      border-right: 1px solid #ccc;
      overflow: auto;
      z-index: 2;

    }
    code[class*="language-"],
    pre[class*="language-"] {
      color: #333;
      background: none;
      font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
      text-align: left;
      white-space: pre;
      word-spacing: normal;
      word-break: normal;
      word-wrap: normal;
      line-height: 1.4;
      -moz-tab-size: 8;
      -o-tab-size: 8;
      tab-size: 8;
      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
    }

    /* Code blocks */
    pre[class*="language-"] {
      padding: .8em;
      overflow: auto;
      /* border: 1px solid #ddd; */
      border-radius: 3px;
      /* background: #fff; */
      background: #f5f5f5;
    }

    /* Inline code */
    :not(pre)>code[class*="language-"] {
      padding: .1em;
      border-radius: .3em;
      white-space: normal;
      background: #f5f5f5;
    }

    .token.comment,
    .token.blockquote {
      color: #969896;
    }

    .token.cdata {
      color: #183691;
    }

    .token.doctype,
    .token.punctuation,
    .token.variable,
    .token.macro.property {
      color: #333;
    }

    .token.operator,
    .token.important,
    .token.keyword,
    .token.rule,
    .token.builtin {
      color: #a71d5d;
    }

    .token.string,
    .token.url,
    .token.regex,
    .token.attr-value {
      color: #183691;
    }

    .token.property,
    .token.number,
    .token.boolean,
    .token.entity,
    .token.atrule,
    .token.constant,
    .token.symbol,
    .token.command,
    .token.code {
      color: #0086b3;
    }

    .token.tag,
    .token.selector,
    .token.prolog {
      color: #63a35c;
    }

    .token.function,
    .token.namespace,
    .token.pseudo-element,
    .token.class,
    .token.class-name,
    .token.pseudo-class,
    .token.id,
    .token.url-reference .token.variable,
    .token.attr-name {
      color: #795da3;
    }

    .token.entity {
      cursor: help;
    }

    .token.title,
    .token.title .token.punctuation {
      font-weight: bold;
      color: #1d3e81;
    }

    .token.list {
      color: #ed6a43;
    }

    .token.inserted {
      background-color: #eaffea;
      color: #55a532;
    }

    .token.deleted {
      background-color: #ffecec;
      color: #bd2c00;
    }

    .token.bold {
      font-weight: bold;
    }

    .token.italic {
      font-style: italic;
    }

    /* JSON */
    .language-json .token.property {
      color: #183691;
    }

    .language-markup .token.tag .token.punctuation {
      color: #333;
    }

    /* CSS */
    code.language-css,
    .language-css .token.function {
      color: #0086b3;
    }

    /* YAML */
    .language-yaml .token.atrule {
      color: #63a35c;
    }

    code.language-yaml {
      color: #183691;
    }

    /* Ruby */
    .language-ruby .token.function {
      color: #333;
    }

    /* Markdown */
    .language-markdown .token.url {
      color: #795da3;
    }

    /* Makefile */
    .language-makefile .token.symbol {
      color: #795da3;
    }

    .language-makefile .token.variable {
      color: #183691;
    }

    .language-makefile .token.builtin {
      color: #0086b3;
    }

    /* Bash */
    .language-bash .token.keyword {
      color: #0086b3;
    }

    html body {
      font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: #333;
      background-color: #fff;
      overflow: initial;
      box-sizing: border-box;
      word-wrap: break-word
    }

    html body>:first-child {
      margin-top: 0
    }

    html body h1,
    html body h2,
    html body h3,
    html body h4,
    html body h5,
    html body h6 {
      line-height: 1.2;
      margin-top: 1em;
      margin-bottom: 16px;
      color: #000
    }

    html body h1 {
      font-size: 2.25em;
      font-weight: 300;
      padding-bottom: .3em
    }

    html body h2 {
      font-size: 1.75em;
      font-weight: 400;
      padding-bottom: .3em
    }

    html body h3 {
      font-size: 1.5em;
      font-weight: 500
    }

    html body h4 {
      font-size: 1.25em;
      font-weight: 600
    }

    html body h5 {
      font-size: 1.1em;
      font-weight: 600
    }

    html body h6 {
      font-size: 1em;
      font-weight: 600
    }

    html body h1,
    html body h2,
    html body h3,
    html body h4,
    html body h5 {
      font-weight: 600
    }

    html body h5 {
      font-size: 1em
    }

    html body h6 {
      color: #5c5c5c
    }

    html body strong {
      color: #000
    }

    html body del {
      color: #5c5c5c
    }

    html body a:not([href]) {
      color: inherit;
      text-decoration: none
    }

    html body a {
      color: #08c;
      text-decoration: none
    }

    html body a:hover {
      color: #00a3f5;
      text-decoration: none
    }

    html body img {
      max-width: 100%
    }

    html body>p {
      margin-top: 0;
      margin-bottom: 16px;
      word-wrap: break-word
    }

    html body>ul,
    html body>ol {
      margin-bottom: 16px
    }

    html body ul,
    html body ol {
      padding-left: 2em
    }

    html body ul.no-list,
    html body ol.no-list {
      padding: 0;
      list-style-type: none
    }

    html body ul ul,
    html body ul ol,
    html body ol ol,
    html body ol ul {
      margin-top: 0;
      margin-bottom: 0
    }

    html body li {
      margin-bottom: 0
    }

    html body li.task-list-item {
      list-style: none
    }

    html body li>p {
      margin-top: 0;
      margin-bottom: 0
    }

    html body .task-list-item-checkbox {
      margin: 0 .2em .25em -1.8em;
      vertical-align: middle
    }

    html body .task-list-item-checkbox:hover {
      cursor: pointer
    }

    html body blockquote {
      margin: 16px 0;
      font-size: inherit;
      padding: 0 15px;
      color: #5c5c5c;
      border-left: 4px solid #d6d6d6
    }

    html body blockquote>:first-child {
      margin-top: 0
    }

    html body blockquote>:last-child {
      margin-bottom: 0
    }

    html body hr {
      height: 4px;
      margin: 32px 0;
      background-color: #d6d6d6;
      border: 0 none
    }

    html body table {
      margin: 10px 0 15px 0;
      border-collapse: collapse;
      border-spacing: 0;
      display: block;
      width: 100%;
      overflow: auto;
      word-break: normal;
      word-break: keep-all
    }

    html body table th {
      font-weight: bold;
      color: #000
    }

    html body table td,
    html body table th {
      border: 1px solid #d6d6d6;
      padding: 6px 13px
    }

    html body dl {
      padding: 0
    }

    html body dl dt {
      padding: 0;
      margin-top: 16px;
      font-size: 1em;
      font-style: italic;
      font-weight: bold
    }

    html body dl dd {
      padding: 0 16px;
      margin-bottom: 16px
    }

    html body code {
      font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
      font-size: .85em !important;
      color: #000;
      background-color: #f0f0f0;
      border-radius: 3px;
      padding: .2em 0
    }

    html body code::before,
    html body code::after {
      letter-spacing: -0.2em;
      content: "\00a0"
    }

    html body pre>code {
      padding: 0;
      margin: 0;
      font-size: .85em !important;
      word-break: normal;
      white-space: pre;
      background: transparent;
      border: 0
    }

    html body .highlight {
      margin-bottom: 16px
    }

    html body .highlight pre,
    html body pre {
      padding: 1em;
      overflow: auto;
      font-size: .85em !important;
      line-height: 1.45;
      border: #d6d6d6;
      border-radius: 3px
    }

    html body .highlight pre {
      margin-bottom: 0;
      word-break: normal
    }

    html body pre code,
    html body pre tt {
      display: inline;
      max-width: initial;
      padding: 0;
      margin: 0;
      overflow: initial;
      line-height: inherit;
      word-wrap: normal;
      background-color: transparent;
      border: 0
    }

    html body pre code:before,
    html body pre tt:before,
    html body pre code:after,
    html body pre tt:after {
      content: normal
    }

    html body p,
    html body blockquote,
    html body ul,
    html body ol,
    html body dl,
    html body pre {
      margin-top: 0;
      margin-bottom: 16px
    }

    html body kbd {
      color: #000;
      border: 1px solid #d6d6d6;
      border-bottom: 2px solid #c7c7c7;
      padding: 2px 4px;
      background-color: #f0f0f0;
      border-radius: 3px
    }

    @media print {
      html body {
        background-color: #fff
      }

      html body h1,
      html body h2,
      html body h3,
      html body h4,
      html body h5,
      html body h6 {
        color: #000;
        page-break-after: avoid
      }

      html body blockquote {
        color: #5c5c5c
      }

      html body pre {
        page-break-inside: avoid
      }

      html body table {
        display: table
      }

      html body img {
        display: block;
        max-width: 100%;
        max-height: 100%
      }

      html body pre,
      html body code {
        word-wrap: break-word;
        white-space: pre
      }
    }

    .markdown-preview {
      width: 100%;
      height: 100%;
      box-sizing: border-box
    }

    .markdown-preview .pagebreak,
    .markdown-preview .newpage {
      page-break-before: always
    }

    .markdown-preview pre.line-numbers {
      position: relative;
      padding-left: 3.8em;
      counter-reset: linenumber
    }

    .markdown-preview pre.line-numbers>code {
      position: relative
    }

    .markdown-preview pre.line-numbers .line-numbers-rows {
      position: absolute;
      pointer-events: none;
      top: 1em;
      font-size: 100%;
      left: 0;
      width: 3em;
      letter-spacing: -1px;
      border-right: 1px solid #999;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none
    }

    .markdown-preview pre.line-numbers .line-numbers-rows>span {
      pointer-events: none;
      display: block;
      counter-increment: linenumber
    }

    .markdown-preview pre.line-numbers .line-numbers-rows>span:before {
      content: counter(linenumber);
      color: #999;
      display: block;
      padding-right: .8em;
      text-align: right
    }

    .markdown-preview .mathjax-exps .MathJax_Display {
      text-align: center !important
    }

    .markdown-preview:not([for="preview"]) .code-chunk .btn-group {
      display: none
    }

    .markdown-preview:not([for="preview"]) .code-chunk .status {
      display: none
    }

    .markdown-preview:not([for="preview"]) .code-chunk .output-div {
      margin-bottom: 16px
    }

    .scrollbar-style::-webkit-scrollbar {
      width: 8px
    }

    .scrollbar-style::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: transparent
    }

    .scrollbar-style::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgba(150, 150, 150, 0.66);
      border: 4px solid rgba(150, 150, 150, 0.66);
      background-clip: content-box
    }

    html body[for="html-export"]:not([data-presentation-mode]) {
      position: relative;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      overflow: auto
    }

    html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
      position: relative;
      top: 0
    }

    @media screen and (min-width:914px) {
      html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
        padding: 2em calc(50% - 457px)
      }
    }

    @media screen and (max-width:914px) {
      html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
        padding: 2em
      }
    }

    @media screen and (max-width:450px) {
      html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview {
        font-size: 14px !important;
        padding: 1em
      }
    }

    @media print {
      html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn {
        display: none
      }
    }

    html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn {
      position: fixed;
      bottom: 8px;
      left: 8px;
      font-size: 28px;
      cursor: pointer;
      color: inherit;
      z-index: 99;
      width: 32px;
      text-align: center;
      opacity: .4
    }

    html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn {
      opacity: 1
    }

    html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc {
      position: fixed;
      top: 0;
      left: 0;
      width: 300px;
      height: 100%;
      padding: 32px 0 48px 0;
      font-size: 14px;
      box-shadow: 0 0 4px rgba(150, 150, 150, 0.33);
      box-sizing: border-box;
      overflow: auto;
      background-color: inherit
    }

    html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar {
      width: 8px
    }

    html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: transparent
    }

    html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgba(150, 150, 150, 0.66);
      border: 4px solid rgba(150, 150, 150, 0.66);
      background-clip: content-box
    }

    html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a {
      text-decoration: none
    }

    html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul {
      padding: 0 1.6em;
      margin-top: .8em
    }

    html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li {
      margin-bottom: .8em
    }

    html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul {
      list-style-type: none
    }

    html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview {
      left: 300px;
      width: calc(100% - 300px);
      padding: 2em calc(50% - 457px - 150px);
      margin: 0;
      box-sizing: border-box
    }

    @media screen and (max-width:1274px) {
      body>ul {
        display: none;
      }
      html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview {
        padding: 2em
      }
    }

    @media screen and (max-width:450px) {
      html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview {
        width: 100%
      }
    }

    html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview {
      left: 50%;
      transform: translateX(-50%)
    }

    html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc {
      display: none
    }

    /* Please visit the URL below for more information: */
    /* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
  </style>
</head>

<body for="html-export">
  <ul>
    <li><a href="#olmaps-api">Olmaps API</a>
      <ul>
        <li><a href="#%E4%BD%BF%E7%94%A8">&#x4F7F;&#x7528;</a></li>
        <li><a href="#1%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C">1.&#x57FA;&#x672C;&#x64CD;&#x4F5C;</a><br>
          * <a href="#%E5%88%9D%E5%A7%8B%E5%8C%96">&#x521D;&#x59CB;&#x5316;</a><br>
          * <a
            href="#%E8%AE%BE%E7%BD%AE%E5%9C%B0%E5%9B%BE%E4%B8%AD%E5%BF%83%E7%82%B9">&#x8BBE;&#x7F6E;&#x5730;&#x56FE;&#x4E2D;&#x5FC3;&#x70B9;</a><br>
          * <a
            href="#%E5%88%87%E6%8D%A2%E5%9C%B0%E5%9B%BE%E7%B1%BB%E5%9E%8B">&#x5207;&#x6362;&#x5730;&#x56FE;&#x7C7B;&#x578B;</a><br>
          * <a
            href="#%E6%94%AF%E6%8C%81%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E5%B1%82">&#x652F;&#x6301;&#x81EA;&#x5B9A;&#x4E49;&#x56FE;&#x5C42;</a><br>
          * <a
            href="#%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E7%BC%A9%E6%94%BE%E5%B1%82%E7%BA%A7">&#x83B7;&#x53D6;&#x5F53;&#x524D;&#x7F29;&#x653E;&#x5C42;&#x7EA7;</a><br>
          * <a
            href="#%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E4%B8%AD%E5%BF%83%E7%82%B9%E5%9D%90%E6%A0%87">&#x83B7;&#x53D6;&#x5F53;&#x524D;&#x4E2D;&#x5FC3;&#x70B9;&#x5750;&#x6807;</a><br>
          * <a
            href="#%E8%8E%B7%E5%8F%96%E8%AF%B7%E6%B1%82%E5%9C%B0%E5%9D%80">&#x83B7;&#x53D6;&#x8BF7;&#x6C42;&#x5730;&#x5740;</a><br>
          * <a
            href="#%E6%94%BE%E5%A4%A7%E4%B8%80%E4%B8%AA%E5%B1%82%E7%BA%A7">&#x653E;&#x5927;&#x4E00;&#x4E2A;&#x5C42;&#x7EA7;</a><br>
          * <a
            href="#%E7%BC%A9%E5%B0%8F%E4%B8%80%E4%B8%AA%E5%B1%82%E7%BA%A7">&#x7F29;&#x5C0F;&#x4E00;&#x4E2A;&#x5C42;&#x7EA7;</a><br>
          * <a
            href="#%E8%AE%BE%E7%BD%AE%E5%B1%82%E7%BA%A7%E5%A4%A7%E5%B0%8F">&#x8BBE;&#x7F6E;&#x5C42;&#x7EA7;&#x5927;&#x5C0F;</a><br>
          * <a
            href="#%E8%8E%B7%E5%8F%962%E4%B8%AA%E7%BB%8F%E7%BA%AC%E5%BA%A6%E7%9B%B4%E6%8E%A5%E7%9A%84%E7%9B%B4%E7%BA%BF%E8%B7%9D%E7%A6%BB">&#x83B7;&#x53D6;2&#x4E2A;&#x7ECF;&#x7EAC;&#x5EA6;&#x76F4;&#x63A5;&#x7684;&#x76F4;&#x7EBF;&#x8DDD;&#x79BB;</a>
        </li>
        <li><a href="#2%E7%BB%98%E5%88%B6%E8%A6%86%E7%9B%96%E7%89%A9">2.&#x7ED8;&#x5236;&#x8986;&#x76D6;&#x7269;</a><br>
          * <a href="#%E7%BB%98%E5%88%B6%E7%82%B9%E6%A0%87%E8%AE%B0">&#x7ED8;&#x5236;&#x70B9;&#x6807;&#x8BB0;</a><br>
          * <a
            href="#%E7%94%BB%E7%BA%BF%E5%AE%9E%E7%BA%BF%E5%92%8C%E8%99%9A%E7%BA%BF%E7%94%A8type%E5%81%9A%E5%8C%BA%E5%88%86">&#x753B;&#x7EBF;&#xFF1A;&#x5B9E;&#x7EBF;&#x548C;&#x865A;&#x7EBF;&#x7528;type&#x505A;&#x533A;&#x5206;</a><br>
          * <a href="#%E7%BB%98%E5%88%B6%E5%9C%86%E5%BD%A2">&#x7ED8;&#x5236;&#x5706;&#x5F62;</a><br>
          * <a href="#%E7%BB%98%E5%88%B6%E5%A4%9A%E8%BE%B9%E5%BD%A2">&#x7ED8;&#x5236;&#x591A;&#x8FB9;&#x5F62;</a><br>
          * <a href="#%E6%8F%8F%E7%82%B9%E6%8F%8F%E8%BE%B9">&#x63CF;&#x70B9;&#xFF08;&#x63CF;&#x8FB9;&#xFF09;</a><br>
          * <a href="#%E7%82%B9%E7%BA%BF%E9%9B%86%E5%90%88">&#x70B9;&#x7EBF;&#x96C6;&#x5408;</a></li>
        <li><a href="#3%E5%88%A0%E9%99%A4%E6%93%8D%E4%BD%9C">3.&#x5220;&#x9664;&#x64CD;&#x4F5C;</a><br>
          * <a
            href="#%E5%88%A0%E9%99%A4%E5%8D%95%E4%B8%AA%E6%88%96%E5%A4%9A%E4%B8%AA%E8%A6%86%E7%9B%96%E7%89%A9">&#x5220;&#x9664;&#x5355;&#x4E2A;&#x6216;&#x591A;&#x4E2A;&#x8986;&#x76D6;&#x7269;</a>
        </li>
        <li><a href="#4%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC">4.&#x4E8B;&#x4EF6;&#x76D1;&#x542C;</a><br>
          * <a
            href="#%E5%9C%B0%E5%9B%BE%E7%A7%BB%E5%8A%A8%E7%9A%84%E7%9B%91%E5%90%AC">&#x5730;&#x56FE;&#x79FB;&#x52A8;&#x7684;&#x76D1;&#x542C;</a><br>
          * <a
            href="#%E6%A0%87%E8%AE%B0%E6%8B%96%E5%8A%A8%E5%9B%9E%E8%B0%83">&#x6807;&#x8BB0;&#x62D6;&#x52A8;&#x56DE;&#x8C03;</a><br>
          * <a
            href="#%E6%A0%87%E8%AE%B0%E7%82%B9%E5%87%BB%E5%9B%9E%E8%B0%83">&#x6807;&#x8BB0;&#x70B9;&#x51FB;&#x56DE;&#x8C03;</a><br>
          * <a
            href="#%E6%A0%87%E8%AE%B0%E9%95%BF%E6%8C%89%E5%9B%9E%E8%B0%83">&#x6807;&#x8BB0;&#x957F;&#x6309;&#x56DE;&#x8C03;</a><br>
          * <a href="#olmapsmap">olmaps.map</a></li>
        <li><a href="#5%E5%B7%A5%E5%85%B7%E6%96%B9%E6%B3%95">5.&#x5DE5;&#x5177;&#x65B9;&#x6CD5;</a>
          <ul>
            <li><a href="#%E6%B7%BB%E5%8A%A0%E5%9B%BE%E5%B1%82">&#x6DFB;&#x52A0;&#x56FE;&#x5C42;</a></li>
            <li><a
                href="#%E8%8E%B7%E5%8F%96map%E6%89%80%E6%9C%89%E8%A6%86%E7%9B%96%E7%89%A9">&#x83B7;&#x53D6;map&#x6240;&#x6709;&#x8986;&#x76D6;&#x7269;</a>
            </li>
            <li><a
                href="#%E8%BD%AC%E6%8D%A2%E7%BB%8F%E7%BA%AC%E5%BA%A6%E5%88%B0%E9%BB%98%E8%AE%A4%E5%9D%90%E6%A0%87%E7%B3%BB">&#x8F6C;&#x6362;&#x7ECF;&#x7EAC;&#x5EA6;&#x5230;&#x9ED8;&#x8BA4;&#x5750;&#x6807;&#x7CFB;</a>
            </li>
            <li><a href="#%E5%9D%90%E6%A0%87%E7%B3%BB%E4%BA%92%E8%BD%AC">&#x5750;&#x6807;&#x7CFB;&#x4E92;&#x8F6C;</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <div class="mume markdown-preview   ">
    
    <h2 class="mume-header" id="olmaps-api">Olmaps API</h2>

    <p><strong>&#x57FA;&#x4E8E;openlayers5&#x7684;&#x5C01;&#x88C5;</strong></p>
    <p>
      &#x9ED8;&#x8BA4;&#x4F20;&#x5165;&#x548C;&#x8FD4;&#x56DE;&#x7684;&#x7ECF;&#x7EAC;&#x5EA6;&#x90FD;&#x662F;EPSG:4326&#x5750;&#x6807;&#x4F53;&#x7CFB;&#xFF0C;&#x5982;&#x4F7F;&#x7528;&#x5176;&#x4ED6;&#x7684;&#x5750;&#x6807;&#x7CFB;&#x9700;&#x8981;&#x7ECF;&#x8FC7;&#x8F6C;&#x6362;&#x3002;&#x5730;&#x56FE;&#x5185;&#x90E8;&#x4F7F;&#x7528;&#x7684;EPSG:3857&#x5750;&#x6807;&#x7CFB;&#x3002;
    </p>
    <h3 class="mume-header" id="%E4%BD%BF%E7%94%A8">&#x4F7F;&#x7528;</h3>

    <ul>
      <li>&#x6D4F;&#x89C8;&#x5668;&#x76F4;&#x63A5;&#x5F15;&#x5165;dist&#x76EE;&#x5F55;&#x4E0B;index.js</li>
      <li>npm &#x5B89;&#x88C5;</li>
    </ul>
    <blockquote>
      <p>npm install olmaps --save</p>
    </blockquote>
    <pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>map<span class="token punctuation">&quot;</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">=&quot;</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">500</span><span class="token unit">px</span><span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">500</span><span class="token unit">px</span></span><span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre>
    <pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword">import</span> Olmaps <span class="token keyword">from</span> <span class="token string">&apos;olmaps&apos;</span>

<span class="token keyword">const</span> olmaps <span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Olmaps</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
olmaps<span class="token punctuation">.</span><span class="token function">getZoom</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
olmaps<span class="token punctuation">.</span><span class="token function">addCircle</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  center<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">116.39786526</span><span class="token punctuation">,</span> <span class="token number">39.92421163</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  radius<span class="token punctuation">:</span> <span class="token number">100</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre>
    <h3 class="mume-header" id="1%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C">1.&#x57FA;&#x672C;&#x64CD;&#x4F5C;</h3>

    <h5 class="mume-header" id="%E5%88%9D%E5%A7%8B%E5%8C%96">&#x521D;&#x59CB;&#x5316;</h5>

    <ul>
      <li>&#x521D;&#x59CB;&#x5316;&#x5730;&#x56FE;</li>
      <li>&#x8FD4;&#x56DE;map&#x5B9E;&#x4F8B;</li>
    </ul>
    <pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword">const</span> olmaps <span class="token operator">=</span><span class="token keyword">new</span> <span class="token class-name">Olmaps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  target<span class="token punctuation">:</span> <span class="token string">&apos;map&apos;</span>
  center<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">116.39786526</span><span class="token punctuation">,</span> <span class="token number">39.92421163</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  zoom<span class="token punctuation">:</span> <span class="token number">16</span> <span class="token punctuation">,</span>
  minZoom<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
  maxZoom<span class="token punctuation">:</span> <span class="token number">20</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</pre>
    <table>
      <thead>
        <tr>
          <th>variable</th>
          <th>description</th>
          <th>default</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>target</td>
          <td>dom&#x5143;&#x7D20;&#x7684;id</td>
          <td>map</td>
        </tr>
        <tr>
          <td>center</td>
          <td>&#x521D;&#x59CB;&#x5316;&#x5730;&#x56FE;&#x4E2D;&#x5FC3;&#x70B9;&#x5750;&#x6807;</td>
          <td>&#x65E0;</td>
        </tr>
        <tr>
          <td>zoom</td>
          <td>&#x5730;&#x56FE;&#x521D;&#x59CB;&#x5316;&#x5C42;&#x7EA7;</td>
          <td>16</td>
        </tr>
        <tr>
          <td>minZoom</td>
          <td>&#x6700;&#x5C0F;&#x7F29;&#x653E;&#x5C42;&#x7EA7;</td>
          <td>10</td>
        </tr>
        <tr>
          <td>maxZoom</td>
          <td>&#x6700;&#x5927;&#x7F29;&#x653E;&#x5C42;&#x7EA7;</td>
          <td>20</td>
        </tr>
        <tr>
          <td>mapSrc</td>
          <td>&#x81EA;&#x5B9A;&#x4E49;&#x56FE;&#x5C42;</td>
          <td>[]</td>
        </tr>
      </tbody>
    </table>
    <h5 class="mume-header" id="%E8%AE%BE%E7%BD%AE%E5%9C%B0%E5%9B%BE%E4%B8%AD%E5%BF%83%E7%82%B9">
      &#x8BBE;&#x7F6E;&#x5730;&#x56FE;&#x4E2D;&#x5FC3;&#x70B9;</h5>

    <pre data-role="codeBlock" data-info class="language-"><code>olmaps.setMapCenter([116.39786526, 39.92421163])
</code></pre>
    <h5 class="mume-header" id="%E5%88%87%E6%8D%A2%E5%9C%B0%E5%9B%BE%E7%B1%BB%E5%9E%8B">
      &#x5207;&#x6362;&#x5730;&#x56FE;&#x7C7B;&#x578B;</h5>

    <ul>
      <li>&#x9ED8;&#x8BA4;&#x652F;&#x6301;&#x4EE5;&#x4E0B;&#x56DB;&#x79CD;&#x7C7B;&#x578B;&#x5730;&#x56FE;</li>
    </ul>
    <pre data-role="codeBlock" data-info class="language-"><code>olmaps.setMapType(&apos;0&apos;)
</code></pre>
    <table>
      <thead>
        <tr>
          <th>variable</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>type</td>
          <td>&apos;0&apos; &#x8C37;&#x6B4C;&#x884C;&#x653F;&#x56FE; &apos;1&apos;
            &#x8C37;&#x6B4C;&#x5F71;&#x50CF;&#x56FE; &apos;2&apos; &#x9AD8;&#x5FB7;&#x884C;&#x653F;&#x56FE;
            &apos;3&apos; &#x9AD8;&#x5FB7;&#x5F71;&#x50CF;&#x56FE;</td>
        </tr>
      </tbody>
    </table>
    <h5 class="mume-header" id="%E6%94%AF%E6%8C%81%E8%87%AA%E5%AE%9A%E4%B9%89%E5%9B%BE%E5%B1%82">
      &#x652F;&#x6301;&#x81EA;&#x5B9A;&#x4E49;&#x56FE;&#x5C42;</h5>

    <ul>
      <li>
        &#x652F;&#x6301;&#x6DFB;&#x52A0;&#x591A;&#x4E2A;&#xFF0C;type&#x4E3A;&#x5207;&#x6362;&#x5730;&#x56FE;&#x7C7B;&#x578B;&#x65F6;&#x4F7F;&#x7528;
      </li>
    </ul>
    <pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword">const</span> olmaps <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Olmaps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  zoom<span class="token punctuation">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
  mapSrc<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      name<span class="token punctuation">:</span> <span class="token string">&apos;&#x9AD8;&#x5FB7;&#x9053;&#x8DEF;&#x5730;&#x56FE;&apos;</span><span class="token punctuation">,</span> <span class="token comment">// &#x540D;&#x79F0;</span>
      src<span class="token punctuation">:</span> <span class="token string">&apos;http://mt1.google.cn/vt/lyrs=h@298&amp;hl=zh-CN&amp;gl=cn&amp;scale=1&amp;z={z}&amp;y={y}&amp;x={x}&apos;</span><span class="token punctuation">,</span><span class="token comment">// &#x5730;&#x5740;</span>
      visible<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// &#x662F;&#x5426;&#x663E;&#x793A;</span>
      id<span class="token punctuation">:</span> <span class="token string">&apos;66&apos;</span> <span class="token comment">// &#x7C7B;&#x578B;id &#x5FC5;&#x987B;&#x552F;&#x4E00;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre>
    <h5 class="mume-header" id="%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E7%BC%A9%E6%94%BE%E5%B1%82%E7%BA%A7">
      &#x83B7;&#x53D6;&#x5F53;&#x524D;&#x7F29;&#x653E;&#x5C42;&#x7EA7;</h5>

    <pre data-role="codeBlock" data-info class="language-"><code>const zoom = olmaps.getZoom()
</code></pre>
    <table>
      <thead>
        <tr>
          <th>variable</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>zoom</td>
          <td>&#x7F29;&#x653E;&#x5C42;&#x7EA7;</td>
        </tr>
      </tbody>
    </table>
    <h5 class="mume-header" id="%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E4%B8%AD%E5%BF%83%E7%82%B9%E5%9D%90%E6%A0%87">
      &#x83B7;&#x53D6;&#x5F53;&#x524D;&#x4E2D;&#x5FC3;&#x70B9;&#x5750;&#x6807;</h5>

    <pre data-role="codeBlock" data-info class="language-"><code>const center = olmaps.getCenter()
// &#x51FA;&#x53C2;
[116.39786526, 39.92421163]
</code></pre>
    <h5 class="mume-header" id="%E8%8E%B7%E5%8F%96%E8%AF%B7%E6%B1%82%E5%9C%B0%E5%9D%80">
      &#x83B7;&#x53D6;&#x8BF7;&#x6C42;&#x5730;&#x5740;</h5>

    <pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword">const</span> resultUrl <span class="token operator">=</span> olmaps<span class="token punctuation">.</span><span class="token function">getRequestUrl</span><span class="token punctuation">(</span>callback<span class="token punctuation">)</span>
</pre>
    <table>
      <thead>
        <tr>
          <th>variable</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>google</td>
          <td>&#x8C37;&#x6B4C;</td>
        </tr>
        <tr>
          <td>gaode</td>
          <td>&#x9AD8;&#x5FB7;</td>
        </tr>
      </tbody>
    </table>
    <h5 class="mume-header" id="%E6%94%BE%E5%A4%A7%E4%B8%80%E4%B8%AA%E5%B1%82%E7%BA%A7">
      &#x653E;&#x5927;&#x4E00;&#x4E2A;&#x5C42;&#x7EA7;</h5>

    <pre data-role="codeBlock" data-info="js" class="language-javascript">olmaps<span class="token punctuation">.</span><span class="token function">zoomIn</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</pre>
    <h5 class="mume-header" id="%E7%BC%A9%E5%B0%8F%E4%B8%80%E4%B8%AA%E5%B1%82%E7%BA%A7">
      &#x7F29;&#x5C0F;&#x4E00;&#x4E2A;&#x5C42;&#x7EA7;</h5>

    <pre data-role="codeBlock" data-info="js" class="language-javascript">olmaps<span class="token punctuation">.</span><span class="token function">zoomOut</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</pre>
    <h5 class="mume-header" id="%E8%AE%BE%E7%BD%AE%E5%B1%82%E7%BA%A7%E5%A4%A7%E5%B0%8F">
      &#x8BBE;&#x7F6E;&#x5C42;&#x7EA7;&#x5927;&#x5C0F;</h5>

    <pre data-role="codeBlock" data-info="js" class="language-javascript">olmaps<span class="token punctuation">.</span><span class="token function">zoomTo</span><span class="token punctuation">(</span><span class="token number">15</span><span class="token punctuation">)</span>
</pre>
    <h5 class="mume-header"
      id="%E8%8E%B7%E5%8F%962%E4%B8%AA%E7%BB%8F%E7%BA%AC%E5%BA%A6%E7%9B%B4%E6%8E%A5%E7%9A%84%E7%9B%B4%E7%BA%BF%E8%B7%9D%E7%A6%BB">
      &#x83B7;&#x53D6;2&#x4E2A;&#x7ECF;&#x7EAC;&#x5EA6;&#x76F4;&#x63A5;&#x7684;&#x76F4;&#x7EBF;&#x8DDD;&#x79BB;</h5>

    <pre data-role="codeBlock" data-info class="language-"><code>const dis = olmaps.getCoordinateLength([
  [&quot;116.39786526&quot;, &quot;39.92421163&quot;],
  [&quot;116.39593675&quot;, &quot;39.92629634&quot;]
])
</code></pre>
    <h3 class="mume-header" id="2%E7%BB%98%E5%88%B6%E8%A6%86%E7%9B%96%E7%89%A9">
      2.&#x7ED8;&#x5236;&#x8986;&#x76D6;&#x7269;</h3>

    <h5 class="mume-header" id="%E7%BB%98%E5%88%B6%E7%82%B9%E6%A0%87%E8%AE%B0">&#x7ED8;&#x5236;&#x70B9;&#x6807;&#x8BB0;
    </h5>

    <pre data-role="codeBlock" data-info class="language-"><code>const markerInfo = olmaps.addMarker([
  {
    &quot;latitude&quot;:&quot;39.92421163&quot;,
    &quot;longitude&quot;:&quot;116.39786526&quot;,
    &quot;name&quot;:&quot;&#x5355;&#x6746;-1&quot;,
    &quot;type&quot;: &quot;&quot;,
    &quot;drag&quot;: true
  },
  {
    &quot;latitude&quot;:&quot;39.92629634&quot;,
    &quot;longitude&quot;:&quot;116.39593675&quot;,
    &quot;name&quot;:&quot;&#x5355;&#x6746;-10&quot;,
    &quot;type&quot;: &quot;&quot;
  }
])

// markerInfo
{
  &quot;latitude&quot;:&quot;28.174730774025367&quot;,
  &quot;longitude&quot;:&quot;112.9790183901787&quot;,
  &quot;name&quot;:&quot;&#x5355;&#x6746;-10&quot;, 
  &quot;type&quot;: &quot;&quot;,
  olId: &apos;uuid&apos;
}
</code></pre>
    <table>
      <thead>
        <tr>
          <th>variable</th>
          <th>description</th>
          <th>default</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>latitude</td>
          <td>&#x7EAC;&#x5EA6;</td>
          <td></td>
        </tr>
        <tr>
          <td>longitude</td>
          <td>&#x7ECF;&#x5EA6;</td>
          <td></td>
        </tr>
        <tr>
          <td>name</td>
          <td>&#x70B9;&#x4F4D;&#x540D;&#x79F0;</td>
          <td></td>
        </tr>
        <tr>
          <td>type</td>
          <td>&#x70B9;&#x4F4D;&#x7C7B;&#x578B;</td>
          <td></td>
        </tr>
        <tr>
          <td>drag</td>
          <td>true&#x53EF;&#x62D6;&#x62FD; false&#x4E0D;&#x53EF;&#x62D6;&#x62FD;</td>
          <td>false</td>
        </tr>
        <tr>
          <td>olId</td>
          <td>&#x70B9;&#x4F4D;&#x6807;&#x8BC6;</td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <h5 class="mume-header"
      id="%E7%94%BB%E7%BA%BF%E5%AE%9E%E7%BA%BF%E5%92%8C%E8%99%9A%E7%BA%BF%E7%94%A8type%E5%81%9A%E5%8C%BA%E5%88%86">
      &#x753B;&#x7EBF;&#xFF1A;&#x5B9E;&#x7EBF;&#x548C;&#x865A;&#x7EBF;&#x7528;type&#x505A;&#x533A;&#x5206;</h5>

    <pre data-role="codeBlock" data-info class="language-"><code>// &#x5165;&#x53C2;
const info = olmaps.addLine([
  {
    &quot;data&quot;:[
      [&quot;116.39786526&quot;,&quot;39.92421163&quot;],
      [&quot;116.39593675&quot;,&quot;39.92629634&quot;]
    ],
    &quot;color&quot;:&quot;green&quot;,
    &quot;textColor&quot;:&quot;green&quot;,
    &quot;showDistance&quot;:true,
    &quot;type&quot;: &quot;dash&quot;
  },
  {
    &quot;data&quot;:[
      [&quot;116.39593675&quot;,&quot;39.92629634&quot;],
      [&quot;116.39670252&quot;,&quot;39.92647015&quot;]
    ],
    &quot;color&quot;:&quot;red&quot;,
    &quot;textColor&quot;:&quot;green&quot;,
    &quot;showDistance&quot;:false,
    &quot;type&quot;: &quot;line&quot;
  },
  {
    &quot;data&quot;:[
      [&quot;116.39670252&quot;,&quot;39.92647015&quot;],
      [&quot;116.39473110&quot;,&quot;39.92293218&quot;]
    ],
    &quot;color&quot;:&quot;green&quot;,
    &quot;textColor&quot;:&quot;red&quot;,
    &quot;showDistance&quot;:true,
    &quot;type&quot;: &quot;line&quot;
  }
])


// result -&gt; info
[
  {
    &quot;data&quot;:[
      [&quot;116.39786526&quot;,&quot;39.92421163&quot;],
      [&quot;116.39593675&quot;,&quot;39.92629634&quot;]
    ],
    &quot;color&quot;:&quot;green&quot;,
    &quot;textColor&quot;:&quot;green&quot;,
    &quot;showDistance&quot;:true,
    &quot;type&quot;: &quot;dash&quot;,
    &quot;olId&quot;: &quot;d1afa649-6b73-4fad-ab49-801e256da11b&quot;
  },
  {
    &quot;data&quot;:[
      [&quot;116.39593675&quot;,&quot;39.92629634&quot;],
      [&quot;116.39670252&quot;,&quot;39.92647015&quot;]
    ],
    &quot;color&quot;:&quot;red&quot;,
    &quot;textColor&quot;:&quot;green&quot;,
    &quot;showDistance&quot;:false,
    &quot;type&quot;: &quot;line&quot;,
    &quot;olId&quot;: &quot;d1afa649-6b73-4fad-ab49-801e256da11b&quot;
  },
  {
    &quot;data&quot;:[
      [&quot;116.39670252&quot;,&quot;39.92647015&quot;],
      [&quot;116.39473110&quot;,&quot;39.92293218&quot;]
    ],
    &quot;color&quot;:&quot;green&quot;,
    &quot;textColor&quot;:&quot;red&quot;,
    &quot;showDistance&quot;:true,
    &quot;type&quot;: &quot;line&quot;,
    &quot;olId&quot;: &quot;d1afa649-6b73-4fad-ab49-801e256da11b&quot;
  }
]

</code></pre>
    <table>
      <thead>
        <tr>
          <th>variable</th>
          <th>type</th>
          <th>description</th>
          <th>default</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>data</td>
          <td>Array</td>
          <td>&#x7ECF;&#x7EAC;&#x5EA6;&#x6570;&#x7EC4;&#x96C6;&#x5408;</td>
          <td>&#x65E0;</td>
        </tr>
        <tr>
          <td>type</td>
          <td>String</td>
          <td>line &#x5B9E;&#x7EBF; dash &#x865A;&#x7EBF;</td>
          <td>line</td>
        </tr>
        <tr>
          <td>color</td>
          <td>16&#x8FDB;&#x5236; / rgba</td>
          <td>&#x7EBF;&#x6761;&#x989C;&#x8272;</td>
          <td>red</td>
        </tr>
        <tr>
          <td>textColor</td>
          <td>16&#x8FDB;&#x5236; / rgba</td>
          <td>&#x8DDD;&#x79BB;&#x7684;&#x5B57;&#x4F53;&#x989C;&#x8272;</td>
          <td>green</td>
        </tr>
        <tr>
          <td>showDistance</td>
          <td>Boolean</td>
          <td>&#x662F;&#x5426;&#x663E;&#x793A;&#x8DDD;&#x79BB;</td>
          <td>true</td>
        </tr>
        <tr>
          <td>olId</td>
          <td>String</td>
          <td>&#x70B9;&#x4F4D;&#x6807;&#x8BC6;</td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <h5 class="mume-header" id="%E7%BB%98%E5%88%B6%E5%9C%86%E5%BD%A2">&#x7ED8;&#x5236;&#x5706;&#x5F62;</h5>

    <ul>
      <li>&#x4E00;&#x6B21;&#x53EA;&#x7ED8;&#x5236;&#x4E00;&#x4E2A;</li>
    </ul>
    <pre data-role="codeBlock" data-info class="language-"><code>const info = olmaps.addCircle({
  center: [116.39786526, 39.92421163],
  radius: 100
})

// return -&gt; info
[&quot;689dc349-2bfa-4eed-8173-82cc2c76cacb&quot;]
</code></pre>
    <table>
      <thead>
        <tr>
          <th>variable</th>
          <th>type</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>center</td>
          <td>Array</td>
          <td>&#x4E2D;&#x5FC3;&#x70B9;&#x7ECF;&#x5EA6;&#x7EAC;&#x5EA6;</td>
        </tr>
        <tr>
          <td>radius</td>
          <td>String</td>
          <td>&#x5706;&#x7684;&#x534A;&#x5F84;&#xFF08;&#x5355;&#x4F4D;&#x7C73;&#xFF09;</td>
        </tr>
      </tbody>
    </table>
    <h5 class="mume-header" id="%E7%BB%98%E5%88%B6%E5%A4%9A%E8%BE%B9%E5%BD%A2">&#x7ED8;&#x5236;&#x591A;&#x8FB9;&#x5F62;
    </h5>

    <ul>
      <li>&#x7ED8;&#x5236;&#x591A;&#x8FB9;&#x5F62;(&#x4E00;&#x6B21;&#x53EA;&#x7ED8;&#x5236;&#x4E00;&#x4E2A;)</li>
    </ul>
    <pre data-role="codeBlock" data-info class="language-"><code>const info = olmaps.addPolygon([
  [&quot;116.39786526&quot;,&quot;39.92421163&quot;],
  [&quot;116.39593675&quot;,&quot;39.92629634&quot;],
  [&quot;116.39670252&quot;,&quot;39.92647015&quot;],
  [&quot;116.39473110&quot;,&quot;39.92293218&quot;]
])

// return
[&quot;689dc349-2bfa-4eed-8173-82cc2c76cacb&quot;]
</code></pre>
    <h5 class="mume-header" id="%E6%8F%8F%E7%82%B9%E6%8F%8F%E8%BE%B9">&#x63CF;&#x70B9;&#xFF08;&#x63CF;&#x8FB9;&#xFF09;
    </h5>

    <ul>
      <li>
        &#x7279;&#x522B;&#x6CE8;&#x610F;&#x8FD9;&#x91CC;&#x9700;&#x8981;&#x4F20;&#x5165;data&#x7684;&#x6570;&#x7EC4;&#x683C;&#x5F0F;
      </li>
    </ul>
    <pre data-role="codeBlock" data-info class="language-"><code>const info = olmaps.addMultiPolygon({
  data: [
    [
      [&quot;116.39786526&quot;,&quot;39.92421163&quot;],
      [&quot;116.39593675&quot;,&quot;39.92629634&quot;],
      [&quot;116.39670252&quot;,&quot;39.92647015&quot;],
      [&quot;116.39473110&quot;,&quot;39.92293218&quot;]
    ]
  ],
  name: &apos;&apos;,
  id: &apos;&apos;
})
</code></pre>
    <table>
      <thead>
        <tr>
          <th>opts</th>
          <th>type</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>data</td>
          <td>Array</td>
          <td>&#x7ECF;&#x7EAC;&#x5EA6;&#x96C6;&#x5408;</td>
        </tr>
        <tr>
          <td>name</td>
          <td>String</td>
          <td></td>
        </tr>
        <tr>
          <td>id</td>
          <td>String</td>
          <td>&#x552F;&#x4E00;&#x6807;&#x8BC6;</td>
        </tr>
      </tbody>
    </table>
    <h5 class="mume-header" id="%E7%82%B9%E7%BA%BF%E9%9B%86%E5%90%88">&#x70B9;&#x7EBF;&#x96C6;&#x5408;</h5>

    <ul>
      <li>
        &#x7ED8;&#x5236;&#x4E00;&#x7EC4;&#x5B9E;&#x65F6;&#x663E;&#x793A;&#x8DDD;&#x79BB;&#x7684;&#x70B9;&#x7EBF;&#x96C6;&#x5408;
      </li>
      <li>&#x8FD4;&#x56DE;id&#x96C6;&#x5408;&#x7528;&#x4E8E;&#x5220;&#x9664;&#x8BE5;&#x7EC4;&#x6570;&#x636E;</li>
    </ul>
    <pre data-role="codeBlock" data-info class="language-"><code>const info = olmaps.calculateGroup({
  &quot;data&quot;:[
    [&quot;116.39786526&quot;,&quot;39.92421163&quot;],
    [&quot;116.39593675&quot;,&quot;39.92629634&quot;]
  ],
  &quot;color&quot;:&quot;green&quot;,
  &quot;textColor&quot;:&quot;red&quot;,
  &quot;showDistance&quot;:true,
  &quot;type&quot;: &quot;dash&quot;
})

// return
[
  &quot;addf8144-ce43-4143-9dfc-02ff85d2e920-startDI&quot;, 
  &quot;addf8144-ce43-4143-9dfc-02ff85d2e920-endDI&quot;, 
  &quot;addf8144-ce43-4143-9dfc-02ff85d2e920-lineDI&quot;
]
</code></pre>
    <h3 class="mume-header" id="3%E5%88%A0%E9%99%A4%E6%93%8D%E4%BD%9C">3.&#x5220;&#x9664;&#x64CD;&#x4F5C;</h3>

    <h5 class="mume-header"
      id="%E5%88%A0%E9%99%A4%E5%8D%95%E4%B8%AA%E6%88%96%E5%A4%9A%E4%B8%AA%E8%A6%86%E7%9B%96%E7%89%A9">
      &#x5220;&#x9664;&#x5355;&#x4E2A;&#x6216;&#x591A;&#x4E2A;&#x8986;&#x76D6;&#x7269;</h5>

    <ul>
      <li>
        &#x6240;&#x6709;&#x589E;&#x52A0;&#x7684;&#x8986;&#x76D6;&#x7269;&#x90FD;&#x53EF;&#x901A;&#x8FC7;&#x6B64;&#x65B9;&#x6CD5;&#x5355;&#x72EC;&#x5220;&#x9664;
      </li>
      <li>
        ids&#x4E3A;&#x6807;&#x8BC6;&#x96C6;&#x5408;&#xFF08;&#x53EA;&#x5220;&#x9664;&#x4E00;&#x4E2A;&#x4E5F;&#x4F20;list&#xFF09;
      </li>
    </ul>
    <pre data-role="codeBlock" data-info class="language-"><code>olmaps.removeFeature([
  &apos;81f2e09f-ce04-42ac-92f1-98c3d51cc585&apos;
  &apos;81f2e09f-ce04-42ac-92f1-98c3d51cc586&apos;
])

</code></pre>
    <ul>
      <li>&#x6E05;&#x9664;map&#x4E2D;&#x6240;&#x6709;&#x8986;&#x76D6;&#x7269;</li>
    </ul>
    <pre data-role="codeBlock" data-info="js" class="language-javascript">olmaps<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</pre>
    <h3 class="mume-header" id="4%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC">4.&#x4E8B;&#x4EF6;&#x76D1;&#x542C;</h3>

    <h5 class="mume-header" id="%E5%9C%B0%E5%9B%BE%E7%A7%BB%E5%8A%A8%E7%9A%84%E7%9B%91%E5%90%AC">
      &#x5730;&#x56FE;&#x79FB;&#x52A8;&#x7684;&#x76D1;&#x542C;</h5>

    <ul>
      <li>&#x8FD4;&#x56DE;&#x79FB;&#x52A8;&#x540E;&#x7684;&#x5730;&#x56FE;&#x4E2D;&#x5FC3;&#x70B9;&#x5750;&#x6807;</li>
    </ul>
    <pre data-role="codeBlock" data-info="js" class="language-javascript">olmaps<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&apos;change&apos;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// result</span>
<span class="token punctuation">{</span>
  center<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">116.3945817898568</span><span class="token punctuation">,</span> <span class="token number">39.89847346897744</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  zoom<span class="token punctuation">:</span> <span class="token number">16</span>
<span class="token punctuation">}</span>
</pre>
    <h5 class="mume-header" id="%E6%A0%87%E8%AE%B0%E6%8B%96%E5%8A%A8%E5%9B%9E%E8%B0%83">
      &#x6807;&#x8BB0;&#x62D6;&#x52A8;&#x56DE;&#x8C03;</h5>

    <pre data-role="codeBlock" data-info="js" class="language-javascript">olmaps<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&apos;markerDrag&apos;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// result</span>
<span class="token punctuation">{</span>
  <span class="token string">&quot;oldCoordinates&quot;</span><span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token number">116.39786526</span><span class="token punctuation">,</span><span class="token number">39.92421163</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">&quot;coordinates&quot;</span><span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token number">116.39917417799927</span><span class="token punctuation">,</span><span class="token number">39.92202294744385</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">&quot;olId&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;68b22fa0-34cd-49bb-8083-a0a36543fa77&quot;</span>
<span class="token punctuation">}</span>
</pre>
    <table>
      <thead>
        <tr>
          <th>variable</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>coordinates</td>
          <td>&#x8FD4;&#x56DE;&#x62D6;&#x52A8;&#x540E;&#x5750;&#x6807;</td>
        </tr>
        <tr>
          <td>oldCoordinates</td>
          <td>&#x62D6;&#x52A8;&#x524D;&#x5750;&#x6807;</td>
        </tr>
        <tr>
          <td>olId</td>
          <td>&#x88AB;&#x62D6;&#x52A8;&#x70B9;&#x4F4D;&#x6807;&#x8BC6;</td>
        </tr>
      </tbody>
    </table>
    <h5 class="mume-header" id="%E6%A0%87%E8%AE%B0%E7%82%B9%E5%87%BB%E5%9B%9E%E8%B0%83">
      &#x6807;&#x8BB0;&#x70B9;&#x51FB;&#x56DE;&#x8C03;</h5>

    <pre data-role="codeBlock" data-info="js" class="language-javascript">olmaps<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&apos;markerClick&apos;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// result</span>
<span class="token punctuation">{</span>
  <span class="token string">&quot;coordinates&quot;</span><span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token number">116.39786526</span><span class="token punctuation">,</span><span class="token number">39.92421163</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">&quot;olId&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;68b22fa0-34cd-49bb-8083-a0a36543fa77&quot;</span>
<span class="token punctuation">}</span>
</pre>
    <h5 class="mume-header" id="%E6%A0%87%E8%AE%B0%E9%95%BF%E6%8C%89%E5%9B%9E%E8%B0%83">
      &#x6807;&#x8BB0;&#x957F;&#x6309;&#x56DE;&#x8C03;</h5>

    <pre data-role="codeBlock" data-info="js" class="language-javascript">olmaps<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&apos;markerLongClick&apos;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// result</span>
<span class="token punctuation">{</span>
  <span class="token string">&quot;coordinates&quot;</span><span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token number">116.39786526</span><span class="token punctuation">,</span><span class="token number">39.92421163</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token string">&quot;olId&quot;</span><span class="token punctuation">:</span><span class="token string">&quot;68b22fa0-34cd-49bb-8083-a0a36543fa77&quot;</span>
<span class="token punctuation">}</span>
</pre>
    <h5 class="mume-header" id="olmapsmap">olmaps.map</h5>

    <p>
      &#x8FD4;&#x56DE;map&#x5B9E;&#x4F8B;&#xFF0C;map&#x4E0A;&#x7684;&#x5176;&#x4ED6;&#x64CD;&#x4F5C;&#x53C2;&#x8003;openlayers&#x7684;&#x5B98;&#x65B9;API
    </p>
    <h3 class="mume-header" id="5%E5%B7%A5%E5%85%B7%E6%96%B9%E6%B3%95">5.&#x5DE5;&#x5177;&#x65B9;&#x6CD5;</h3>

    <pre data-role="codeBlock" data-info="js" class="language-javascript">olmaps<span class="token punctuation">.</span><span class="token function">addLayer</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
olmaps<span class="token punctuation">.</span><span class="token function">getAllFeatures</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
olmaps<span class="token punctuation">.</span><span class="token function">transformLonLat</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
olmaps<span class="token punctuation">.</span><span class="token function">transProj</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

</pre>
    <h4 class="mume-header" id="%E6%B7%BB%E5%8A%A0%E5%9B%BE%E5%B1%82">&#x6DFB;&#x52A0;&#x56FE;&#x5C42;</h4>

    <p>olmaps.addLayer(olmaps, features)</p>
    <h4 class="mume-header" id="%E8%8E%B7%E5%8F%96map%E6%89%80%E6%9C%89%E8%A6%86%E7%9B%96%E7%89%A9">
      &#x83B7;&#x53D6;map&#x6240;&#x6709;&#x8986;&#x76D6;&#x7269;</h4>

    <p>olmaps.getAllFeatures(olmaps.map)</p>
    <h4 class="mume-header"
      id="%E8%BD%AC%E6%8D%A2%E7%BB%8F%E7%BA%AC%E5%BA%A6%E5%88%B0%E9%BB%98%E8%AE%A4%E5%9D%90%E6%A0%87%E7%B3%BB">
      &#x8F6C;&#x6362;&#x7ECF;&#x7EAC;&#x5EA6;&#x5230;&#x9ED8;&#x8BA4;&#x5750;&#x6807;&#x7CFB;</h4>

    <p>4326&#x8F6C;&#x6362;&#x6210;3857<br>
      olmaps.transformLonLat([116.39786526, 39.924211629999974])</p>
    <h4 class="mume-header" id="%E5%9D%90%E6%A0%87%E7%B3%BB%E4%BA%92%E8%BD%AC">&#x5750;&#x6807;&#x7CFB;&#x4E92;&#x8F6C;
    </h4>

    <p>olmaps.transProj(lonLatArr, oldproj=&apos;EPSG:3857&apos;, newproj=&apos;EPSG:4326&apos;)</p>

  </div>











</body>

</html>